import Wrapper from './style';
import {Collapse, CollapseProps} from "antd";
import {ExpandIconPosition} from "antd/es/collapse/Collapse";
import React, {CSSProperties, ReactNode, useState} from "react";
import move from "@/static/imgs/TeacherMyClassroom/移动.svg";

const ClassBox: React.FC<{ title: string, children: ReactNode }> = ({title, children}) => {

    const [expandIconPosition, /*setExpandIconPosition*/] = useState<ExpandIconPosition>('end');
    const onChange = (key: string | string[]) => {
        console.log(key);
    };

    const genExtra = () => (
        <div className="extra">
            <img src={move} alt=""/>
            <div>课程排序</div>
        </div>
    );

    const panelStyle = {
        marginBottom: 24,
    }

    const getItems: (panelStyle: CSSProperties) => CollapseProps['items'] = (panelStyle) => [
        {
            key: '1',
            label: title,
            children: children,
            extra: genExtra(),
            style: panelStyle,
        },
    ];
    return (
        <Wrapper>
            <div className="box">
                <Collapse
                    defaultActiveKey={['1']}
                    onChange={onChange}
                    expandIconPosition={expandIconPosition}
                    items={getItems(panelStyle)}
                    style={{background: 'rgb(248,249,250)'}}
                />
            </div>
        </Wrapper>
    );
}
export default ClassBox;